<template>
  <view class="contenter">
    <view class="detail">
      <view class="order">
        <view>订单编号：{{list.apporderid}}</view>
        <view>下单时间：{{list.createdate}}</view>
      </view>
      <view class="con flex" v-if="type == 1">
        <view>
          <item-image :img="list.good_image" :width="160" :height="160"/>
        </view>
        <view class="name">{{list.good_name}}</view>
      </view>
      <view class="time" v-if="type == 1">预约时间：{{list.otime}}</view>
      <view v-if="type == 2">
        <view class="con flex"  v-for="(data,index) in list.goods" :key="index">
          <view>
            <item-image :img="data.image" :width="160" :height="160"/>
          </view>
          <view class="name">{{data.name}}</view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="u-pd-b-15">
        <view class="u-flex flex_bt">
          <view class="u-flex">
            <item-image :type="'1'" :img="list.comment.userimg" :size="60"/>
            <view class="u-margin-left-10 name">{{list.comment.nickname}}</view>
          </view>
          <view class="time">{{list.comment.createdate}}</view>
        </view>
        <view class="u-flex u-margin-top-20" v-if="type == 1">
          <view class="u-flex hao">
            <view class="name">环境</view>
            <view class="lv u-margin-left-10">{{list.comment.environment}}</view>
          </view>
          <view class="u-flex zhong">
            <view class="name">服务</view>
            <view class="gai u-margin-left-10">{{list.comment.service}}</view>
          </view>
        </view>
        <view v-if="type == 2" class="u-flex u-margin-top-20">
          <view v-for="(data,index) in list.comment.good_score" class=" u-margin-right-10">
            <u-icon name="star-fill"  color="#E86823" size="30"></u-icon>
          </view>

        </view>
      </view>
      <view class="nei">
        <view>{{list.comment.content}}</view>
        <view class="u-flex u-flex-wrap" v-if="list.comment.images[0]!='' && list.comment.images.length != 0">
          <view class="img " v-for="data in list.comment.images" :key="data">
            <item-image :img="data" :width="160" :height="118"/>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "salesVolume",
  data(){
    return{
      list: {},
      type :'', //1為服务评价 2为商品评价
    }
  },
  onLoad(option){
    this.setData(option.id,option.type)
    this.type = option.type
  },
  methods:{
    setData(id,type){
      let that = this
      console.log(type)
      //type 1為服务评价 2为商品评价
      if(type == 1){
        this.$api.serviceComment({id:id}).then(res => {
          that.list =res.data
        })
      }
      if(type == 2){
        this.$api.orderComment({id:id}).then(res => {
          that.list =res.data
        })
      }

    },


  },
}
</script>>

<style scoped lang="scss">
  .detail{
    background: white;
    padding: 32rpx 48rpx;
    margin-top: 20rpx;
    .order{
      font-size: 24rpx;
      color: #898989;
      padding-bottom: 10rpx;
      border-bottom: 2rpx solid #f2f2f2;
      view{
        padding-bottom: 10rpx;
      }
    }
    .con{
      padding: 20rpx 0;
      border-bottom: 2rpx solid #f2f2f2;
      .name{
        font-size: 32rpx;
        color: #3B3B3B;
        margin-left: 20rpx;
        font-weight: bold;
      }
    }
    .time{
      font-size: 28rpx;
      color: #4B4B4B;
      font-weight: bold;
      margin-top: 20rpx;
    }
  }
  .main{
    background: white;
    padding: 32rpx 48rpx;
    margin-top: 20rpx;
    .name{
      font-size: 28rpx;
      font-weight: bold;
      color: #000
    }
    .time{
      font-size: 24rpx;
      color: #909090;
    }
    .hao{
      .lv{
        width: 92rpx;
        height: 44rpx;
        border: 2rpx solid #45806E;
        border-radius: 8rpx;
        color: #45806E;
        text-align: center;
        line-height: 44rpx;
      }
      padding-right: 42rpx;
      border-right: 2rpx solid #F2F2F2;

    }
    .zhong{
      padding-left: 42rpx;
    }
    .gai{
      width: 92rpx;
      height: 44rpx;
      border: 2rpx solid #E3E3E3;
      border-radius: 8rpx;
      background: #F2F2F2;
      font-size: 24rpx;
      color: #4B4B4B;
      text-align: center;
      line-height: 44rpx;

    }
    .nei{
      padding-top: 32rpx;
      font-size: 24rpx;
      border-top: 2rpx solid #f2f2f2;
      .img{
        margin-top: 30rpx;
        margin-right: 30rpx;
      }
    }
  }
</style>